<!-- 绘制九宫格 -->
<template>
  <div class="container">
    <div style="width: 600px; height: 600px;magin-top:10px" ref="chart" class="container" id="echart"></div>
    <p class="title1" v-if="showTitle1">客户关系九宫格</p>
    <p class="title2" v-if="showTitle2">客户关系九宫格</p>
    <p class="x1">能进办公室</p>
    <p class="x11">直接进入</p>
    <p class="x12">预约同意</p>
    <p class="x13">来办事处</p>
    <p class="x14">主动邀请</p>
    <p class="x2">能入朋友圈</p>
    <p class="x21">客户引荐</p>
    <p class="x22">兴趣活动</p>
    <p class="x23">私人聚会</p>
    <p class="x24">陪同公务</p>
    <p class="x3">能入家庭</p>
    <p class="x31">家庭活动</p>
    <p class="x32">教育服务</p>
    <p class="x33">医疗服务</p>
    <p class="x34">就业晋升</p>
    <p class="x-title">私交</p>
    <p class="y1">公开资料</p>
    <p class="y2">内部资料</p>
    <p class="y3">明确支持</p>
    <p class="y-title">业务</p>
    <p class="y-detail1" v-if="showTitle2">
      <span class="number">①</span> 招标技术规范：HPLC、一二次融合、TTU/SCU、电商化<br />
      <span class="number">②</span> 月报、周报、通报：营销部、配电部（设备部）<br />
      <span class="number">③</span> 同业对标指标文件：营销部、配电部（设备部），双月<br />
      <span class="number">④</span> 招标采购计划：省级年度招标采购计划文件<br />
      <span class="number">⑤</span> 客户组织架构与通讯录：纸质或电子版的省公司通讯录
    </p>
    <p class="y-detail2" v-if="showTitle2">
      <span class="number">①</span> 评标细则：HPLC、一二次融合、TTU/SCU<br />
      <span class="number">②</span> 资金计划：营销投入、配网技改、配网大修、基建、零购<br />
      <span class="number">③</span> 高层领导讲话及重要会议材料（董事长、总经理、分管副总、部门主任，重点两会和年中）<br />
      <span class="number">④</span> 项目储备、可研与概算：项目储备库明细和批复的项目可研报告<br />
      <span class="number">⑤</span> 内部变化：中层及以上干部调整名单
    </p>
    <p class="y-detail3" v-if="showTitle2">
      <span class="number">①</span> 修改规则：HPLC份额比例<br />
      <span class="number">②</span> 加入短名单：HPLC、一二次融合、TTU/SCU、电商化<br />
      <span class="number">③</span> 项目批复与资金分配：储备项目批复及项目资金优先匹配<br />
      <span class="number">④</span> 履约数量与评价：国网、省招中标履约120%及以上；绩效评价营销集采类（电表、集中器、终端）99分以上，配网类（一二次融合、FTU）A档<br />
      <span class="number">⑤</span> 影响招标：排名、分包、商务资质、业绩、检测标准（HPLC、一二次融合、TTU/SCU、电商化）
    </p>
    <div class="tooltip1" v-if="showTitle1">
      <el-tooltip content="点击图片上方的图例可以控制对应职务数据的显示,圆点是数据的起始点。" placement="top" style="font-size:20px; margin-top:4px">
        <i class="el-icon-info" />
      </el-tooltip>
    </div>
    <div class="tooltip2" v-if="showTitle2">
      <el-tooltip content="点击图片上方的图例可以控制对应职务数据的显示,圆点是数据的起始点。" placement="top" style="font-size:20px; margin-top:4px">
        <i class="el-icon-info" />
      </el-tooltip>
    </div>
    <div class="tooltip3" v-if="showTitle1">
      <el-tooltip placement="top" style="font-size:20px; margin-top:4px">
        <div slot="content" class="content">
          <span class="number">①</span> 招标技术规范：HPLC、一二次融合、TTU/SCU、电商化<br />
          <span class="number">②</span> 月报、周报、通报：营销部、配电部（设备部）<br />
          <span class="number">③</span> 同业对标指标文件：营销部、配电部（设备部），双月<br />
          <span class="number">④</span> 招标采购计划：省级年度招标采购计划文件<br />
          <span class="number">⑤</span> 客户组织架构与通讯录：纸质或电子版的省公司通讯录
        </div>
        <i class="el-icon-info" />
      </el-tooltip>
    </div>
    <div class="tooltip4" v-if="showTitle1">
      <el-tooltip placement="top" style="font-size:20px; margin-top:4px">
        <div slot="content" class="content">
          <span class="number">①</span> 评标细则：HPLC、一二次融合、TTU/SCU<br />
          <span class="number">②</span> 资金计划：营销投入、配网技改、配网大修、基建、零购<br />
          <span class="number">③</span> 高层领导讲话及重要会议材料（董事长、总经理、分管副总、部门主任，重点两会和年中）<br />
          <span class="number">④</span> 项目储备、可研与概算：项目储备库明细和批复的项目可研报告<br />
          <span class="number">⑤</span> 内部变化：中层及以上干部调整名单
        </div>
        <i class="el-icon-info" />
      </el-tooltip>
    </div>
    <div class="tooltip5" v-if="showTitle1">
      <el-tooltip placement="top" style="font-size:20px; margin-top:4px">
        <div slot="content" class="content">
          <span class="number">①</span> 修改规则：HPLC份额比例<br />
          <span class="number">②</span> 加入短名单：HPLC、一二次融合、TTU/SCU、电商化<br />
          <span class="number">③</span> 项目批复与资金分配：储备项目批复及项目资金优先匹配<br />
          <span class="number">④</span> 履约数量与评价：国网、省招中标履约120%及以上；绩效评价营销集采类（电表、集中器、终端）99分以上，配网类（一二次融合、FTU）A档<br />
          <span class="number">⑤</span> 影响招标：排名、分包、商务资质、业绩、检测标准（HPLC、一二次融合、TTU/SCU、电商化
        </div>
        <i class="el-icon-info" />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/chart/line')
require('echarts/lib/component/legendScroll')
export default {
  components: {},
  data() {
    return {
      myChart: null,
      // 用于计算箭头偏转角度
      lastPoint: [],
      // 用于控制节点标志
      lastPoint2: []
    }
  },
  props: {
    userRoles: {
      default: function() {
        // return ['职务1', '职务2']
        return []
      },
      type: Array
    },
    dataList: {
      default: function() {
        // return [{ name: '职务1', data: [[1, 3], [1, 2], [1.2, 1.4], [2.4, 2]] }, { name: '职务2', data: [[1.2, 2], [1.2, 3], [1.3, 2], [0, 0]] }]
        return []
      },
      type: Array
    },
    showTitle1: {
      type: Boolean,
      default: true
    },
    showTitle2: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 随机生成颜色
    handleColors() {
      let color = ''
      let r = Math.floor(Math.random() * 256)
      let g = Math.floor(Math.random() * 256)
      let b = Math.floor(Math.random() * 256)
      color = `rgb(${r},${g},${b})`
      return color
    },
    // 适配数据
    dataListAdapter(dataList) {
      for (let item of dataList) {
        item.symbol = (value, params) => {
          if (params.dataIndex === 0) {
            this.lastPoint2 = value
            return 'circle'
          } else if (value[0] === this.lastPoint[0] && value[1] === this.lastPoint[1]) {
            this.lastPoint2 = value
            return 'none'
          } else {
            this.lastPoint2 = value
            return 'arrow'
          }
        }
        item.symbolSize = '10'
        item.type = 'line'
        item.symbolRotate = (value, params) => {
          // 排除第一个点
          if (params.dataIndex === 0) {
            this.lastPoint = value
            return 0
          }
          let thisPoint = value
          let lastPoint = this.lastPoint
          // 计算旋转角度
          let angle = Math.atan2(thisPoint[0] - lastPoint[0], thisPoint[1] - lastPoint[1])
          angle = (angle * 180) / Math.PI
          this.lastPoint = thisPoint
          return -angle
        }
        item.label = {
          show: true,
          position: 'right',
          offset: [-10, -10],
          formatter: (model) => this.accMul(model.data[0], model.data[1])
        }
        item.hoverAnimation = false
      }
      return dataList
    },
    accMul(arg1, arg2) {
      let m = 0
      let s1 = (1 * arg1).toString()
      let s2 = (1 * arg2).toString()
      try {
        m += s1.split('.')[1].length
      } catch (e) {}
      try {
        m += s2.split('.')[1].length
      } catch (e) {}
      let ss = (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m)
      return Math.round(ss * 100) / 100
    },
    init() {
      if (this.userRoles.length > 0 && this.dataList) {
        let option = {
          title: {
            text: ''
          },
          color: [
            '#e6194B',
            '#3cb44b',
            '#ffe119',
            '#4363d8',
            '#f58231',
            '#911eb4',
            '#42d4f4',
            '#f032e6',
            '#bfef45',
            '#fabed4',
            '#469990',
            '#dcbeff',
            '#9A6324',
            '#fffac8',
            '#800000',
            '#aaffc3',
            '#808000',
            '#ffd8b1',
            '#000075',
            '#a9a9a9',
            '#000000',
            '#fd0104',
            '#eed927',
            '#13acfe',
            '#5fd469',
            '#5f1753',
            '#8c54d8',
            '#BE5F70',
            '#5E9A8B',
            '#D9653E',
            '#8F0F22',
            '#E9FC32',
            '#03D6D5',
            '#E62498',
            '#3ABBF5',
            '#8C57BC',
            '#E0EED3',
            '#AA4D27',
            '#6FA6DE',
            '#B6358E',
            '#B3DC50',
            '#518BE7',
            '#2254D2',
            '#E7486E',
            '#629A1C',
            '#61066D',
            '#0131F6',
            '#3C1249',
            '#35E0FA',
            '#479494',
            '#B5FAFA',
            '#4B592E',
            '#5C0543',
            '#BA5286',
            '#273508',
            '#D5BB9E',
            '#945F80',
            '#123CAA',
            '#3122BE',
            '#F0D3D1',
            '#DC387B',
            '#8CB25A',
            '#5AE132',
            '#5548B6',
            '#679609',
            '#A09641',
            '#E1B691',
            '#54EAFB',
            '#C9A724',
            '#638B94',
            '#E6EDAD',
            '#F80AD5',
            '#887582',
            '#DDAD20',
            '#92F386',
            '#3C1500',
            '#04ABB0',
            '#4F6F17',
            '#81E755',
            '#94B162',
            '#30704B',
            '#CF819D',
            '#E65E34',
            '#2EE7AC',
            '#BF8A42',
            '#E3EEB3',
            '#60A46F',
            '#1A5DC1',
            '#F5B498',
            '#D85C23',
            '#32885D',
            '#F0D80B',
            '#034BC2',
            '#C37574',
            '#545720',
            '#E9E5F6',
            '#AE53E0',
            '#08B3C0',
            '#C4022C',
            '#F56DAF',
            '#F5DD2D',
            '#C7C12B',
            '#2F0582',
            '#E2255D',
            '#C19107',
            '#906FBB',
            '#561B56',
            '#C27DF2',
            '#7F57B2',
            '#34CDCA',
            '#A2239A',
            '#E14364'
          ],
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'none'
            },
            formatter: `{a}: ({c})`,
            transitionDuration: 0
          },

          grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            name: '',
            nameLocation: 'end',
            nameTextStyle: {
              color: ['#ff0000']
            },
            nameGap: 15,
            min: 0,
            max: 3,
            minInterval: 1,
            axisLine: {
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisTick: {
              inside: true,
              length: 4
            },
            minorTick: {
              show: true,
              splitNumber: 4
            }
          },
          yAxis: {
            type: 'value',
            name: '',
            nameLocation: 'end',
            nameTextStyle: {
              color: ['#ff0000']
            },
            nameGap: 15,
            min: 0,
            max: 3,
            minInterval: 1,
            axisLine: {
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisTick: {
              inside: true,
              length: 4
            },
            minorTick: {
              show: true,
              splitNumber: 5
            }
          }
          // #region
          //   series: [
          //     {
          //       symbol: (value, params) => {
          //         if (params.dataIndex === 0) {
          //           return 'none'
          //         } else {
          //           return 'arrow'
          //         }
          //       },
          //       symbolSize: '10',
          //       type: 'line',
          //       // stack: 'Total',
          //       symbolRotate: (value, params) => {
          //         // 排除第一个点
          //         if (params.dataIndex === 0) {
          //           this.lastPoint = value
          //           return 0
          //         }
          //         let thisPoint = value
          //         let lastPoint = this.lastPoint
          //         // 计算旋转角度
          //         let angle = Math.atan2(thisPoint[0] - lastPoint[0], thisPoint[1] - lastPoint[1])
          //         angle = (angle * 180) / Math.PI
          //         this.lastPoint = thisPoint
          //         return -angle
          //       },
          //       name: '职务1',
          //       data: [[1, 1], [1, 2], [1.2, 1.4], [2.4, 2]],
          //       label: {
          //         show: true,
          //         position: 'right',
          //         offset: [5, 10],
          //         formatter: (model) => (model.data[0] * model.data[1]).toFixed(2)
          //       }
          //     },
          //     {
          //       name: '职务2',
          //       symbol: (value, params) => {
          //         if (params.dataIndex === 0) {
          //           return 'none'
          //         } else {
          //           return 'arrow'
          //         }
          //       },
          //       symbolSize: '10',
          //       type: 'line',
          //       symbolRotate: (value, params) => {
          //         // 排除第一个点
          //         if (params.dataIndex === 0) {
          //           this.lastPoint = value
          //           return 0
          //         }
          //         let thisPoint = value
          //         let lastPoint = this.lastPoint
          //         // 计算旋转角度
          //         let angle = Math.atan2(thisPoint[0] - lastPoint[0], thisPoint[1] - lastPoint[1])
          //         angle = (angle * 180) / Math.PI
          //         this.lastPoint = thisPoint
          //         return -angle
          //       },
          //       data: [[1.2, 2], [1.2, 3], [1.3, 2], [0, 0]],
          //       label: {
          //         show: true,
          //         position: 'right',
          //         offset: [5, 10],
          //         formatter: (model) => (model.data[0] * model.data[1]).toFixed(2)
          //       }
          //     }
          //   ]
          // #endregion
        }
        option.legend = {
          data: this.userRoles,
          type: 'scroll',
          textStyle: {
            lineHeight: 15
          }
        }
        option.series = this.dataListAdapter(this.dataList)
        option && this.myChart.setOption(option)
      }
    }
  },
  mounted() {
    let chartDom = document.getElementById('echart')
    this.myChart = echarts.init(chartDom)
    // this.myChart.getZr().on('click', function(params) {
    //   // 获取像素坐标点
    //   debugger
    //   const pointInPixel = [params.offsetX, params.offsetY]
    //   const { target, topTarget } = params
    //   // 判断点击的点在点击在折线的拐点 || 折线上
    //   if ((target && target.z === 2) || (topTarget && topTarget.z === 2)) {
    //     // 获取这条折线的 信息 也就是 index
    //     // 如果是拐点，直接读取 target.seriesIndex
    //     // 如果是折线上的点，读取 topTarget 对象下的继续寻找parent的信息的index
    //     const axs = target ? target.seriesIndex : topTarget.parent.parent.__ecComponentInfo.index
    //     console.log(axs)
    //   }
    // })
    // 将可以响应点击事件的范围内，鼠标样式设为pointer--------------------
    // this.myChart.getZr().on('mousemove', function(params) {
    //   const { topTarget } = params
    //   // 给折线的鼠标悬浮 变为 小手
    //   if (topTarget.z === 2) {
    //     this.myChart.getZr().setCursorStyle('pointer')
    //   }
    // })
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  }
}
</script>
<style lang="scss" scoped>
.title1 {
  position: absolute;
  left: 5px;
  top: -45px;
  font-size: 18px;
  font-weight: bolder;
  color: #333333;
}
.title2 {
  position: absolute;
  left: -255px;
  top: -45px;
  font-size: 18px;
  font-weight: bolder;
  color: #333333;
}
.tooltip1 {
  position: absolute;
  left: 135px;
  top: -30px;
}
.tooltip2 {
  position: absolute;
  left: -120px;
  top: -30px;
}
.container {
  position: relative;
  margin-bottom: 20px;
}
.x1 {
  position: absolute;
  left: 95px;
  bottom: 1px;
  font-weight: bolder;
  color: #000000;
}
.x11 {
  position: absolute;
//   left: 10px;
  left: 45px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x12 {
  position: absolute;
//   left: 60px;
  left: 90px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x13 {
  position: absolute;
  left: 135px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x14 {
  position: absolute;
  left: 180px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x21 {
  position: absolute;
  left: 225px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x22 {
  position: absolute;
  left: 270px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x23 {
  position: absolute;
  left: 315px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x24 {
  position: absolute;
  left: 360px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x31 {
  position: absolute;
  left: 410px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x32 {
  position: absolute;
  left: 455px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x33 {
  position: absolute;
  left: 500px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x34 {
  position: absolute;
  left: 545px;
  font-size: 4px;
  bottom: -20px;
  width:24px;
}
.x2 {
  position: absolute;
  left: 270px;
  bottom: 1px;
  font-weight: bolder;
  color: #000000;
}
.x3 {
  position: absolute;
  left: 465px;
  bottom: 1px;
  font-weight: bolder;
  color: #000000;
}
.x-title {
  position: absolute;
  left: 585px;
  bottom: 1px;
  color: red;
  font-weight: bolder;
}
.y1 {
  position: absolute;
  left: -20px;
  bottom: 70px;
  height: 80px;
  writing-mode: vertical-lr;
  font-weight: bolder;
  color: #000000;
}
.y2 {
  position: absolute;
  left: -20px;
  bottom: 240px;
  height: 80px;
  writing-mode: vertical-lr;
  font-weight: bolder;
  color: #000000;
}
.y3 {
  position: absolute;
  left: -20px;
  bottom: 410px;
  height: 80px;
  writing-mode: vertical-lr;
  font-weight: bolder;
  color: #000000;
}
.y-title {
  position: absolute;
  left: -20px;
  bottom: 480px;
  height: 80px;
  writing-mode: vertical-lr;
  color: red;
  font-weight: bolder;
}
.y-detail1 {
  width: 250px;
  position: absolute;
  left: -260px;
  bottom: 100px;
  height: 80px;
  font-weight: bolder;
  font-size: 10px;
  font-family: '微软雅黑';
}
.y-detail2 {
  width: 250px;
  position: absolute;
  left: -260px;
  bottom: 270px;
  height: 80px;
  font-weight: bolder;
  font-size: 10px;
}
.y-detail3 {
  width: 250px;
  position: absolute;
  left: -260px;
  bottom: 470px;
  height: 80px;
  font-weight: bolder;
  font-size: 10px;
}
.number {
  font-size: 13px;
}
.tooltip3 {
  position: absolute;
  left: -3px;
  bottom: 60px;
  font-weight: bolder;
}
.tooltip4 {
  position: absolute;
  left: -3px;
  bottom: 230px;
  font-weight: bolder;
}
.tooltip5 {
  position: absolute;
  left: -3px;
  bottom: 400px;
}
.content {
    font-size: 15px;
    .number {
      font-size: 16px;
    }
}
.el-icon-info {
    color:#606266;
}
</style>
